<template>
  <!-- 在这些页面里主页内容都是背景 -->
  <index />
  <!-- 从这里开始才是主要内容 -->
  <div class="container" v-on:keydown.enter="startMeeting()">
    <div class="head">
      <p>快速课堂设置</p>
      <hr />
    </div>
    <div class="chioce">
      <span>主题</span>
      <div class="name">
        <input type="text" placeholder="输入班级名称" v-bind="className" />
      </div>
    </div>
    <div class="chioce">
      <span>人数限制</span>
      <div class="people">
        <div class="people">
          <el-select
            v-model="value"
            placeholder="请选择人数"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="chioce">
      <span>录制</span>
      <div class="box">
        <el-switch
          v-model="value1"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #808080"
        />
      </div>
    </div>
    <div class="chioce">
      <span>其他</span>
      <div class="other">
        <el-checkbox v-model="checked1" label="入会密码" size="large" />
        <el-checkbox v-model="checked2" label="入会开启摄像头" size="large" />
        <el-checkbox v-model="checked3" label="入会修改备注" size="large" />
        <el-checkbox v-model="checked4" label="聊天和互动" size="large" />
        <el-checkbox v-model="checked5" label="入会开启麦克风" size="large" />
        <el-checkbox v-model="checked6" label="自己解除静音" size="large" />
        <el-checkbox
          v-model="checked7"
          label="允许成员在主持人进会前加入会议"
          size="large"
        />
      </div>
    </div>
    <div class="footer">
      <button type="submit" @click="startMeeting">创建课堂</button>
    </div>
    <img src="../assets/返回.png" class="back" @click="$router.go(-1)" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options : [
  {
    value: "1-10",
    label: "1-10",
  },
  {
    value: "10-30",
    label: "10-30",
  },
  {
    value: "30-50",
    label: "30-50",
  },
  {
    value: "50-100",
    label: "50-100",
  },
  {
    value: "100以上",
    label: "100以上",
  },
],
        value: '',
      }
    },
  }
</script>
<script setup>
import router from "@/router";
import { inject, onMounted, ref } from "vue";
import recordVue from '@/components/setting/record.vue';
import store from "@/store";
import axios from 'axios';

const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const value1 = ref(true);
const className = ref();  //房间名
const address = inject('address')
const userData = store.state.userData
const roomData = store.state.roomData

var recentTime = ref();

onMounted(() => {
  getTime();
});

function getTime() {
  setInterval(() => {
    recentTime.value = new Date();
  }, 1000);
}

async function startMeeting(){
  const bookTime = 
    recentTime.value.getFullYear() +
    "-" + 
    recentTime.value.getMonth() +
    "-" + 
    recentTime.value.getDate() +
    "  " +
    recentTime.value.getHours() +
    ":" + 
    recentTime.value.getMinutes() 
  //创建房间
  await axios({
    url:address + 'admin/room/book',
    method:'PUT',
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data:{
      bookTime:bookTime,
      class_name:className.value,
      class_Time:1,
      userId:userData.userId,
    }
  }).then(res => {
    console.log('接口连接成功！',res.data.data)
    //修改房间数据
    store.commit('setRoomData',{
      userId:store.state.userData.userId,
      roomName:res.data.data.className,
      roomId:res.data.data.classId
    })
    //跳转到房间页面
    router.push('/class')
  }).catch(error => {
    console.error('接口连接失败',error)
  })
}
</script>

<style scoped>
.container {
  width: 800px;
  height: 550px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 4px 6px gray;
}
.head {
  width: 85%;
  margin: 0 auto;
}
.head p {
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: center;
}
hr {
  border: 1px solid black;
}
.chioce span {
  font-family: 微软雅黑;
  font-size: 20px;
  position: absolute;
  left: 100px;
  top: 30%;
}
.name {
  width: 40%;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 23px;
}
.name input {
  width: 100%;
  height: 100%;
  background-color: rgb(238, 238, 238);
  border: none;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}
.chioce {
  padding: 10px;
  position: relative;
}

.people {
  width: 60%;
  height: 40px;
  margin: 0 auto;
}
.box {
  width: 30%;
  height: 40px;
  margin: 0 auto;
}
.other {
  width: 40%;
  height: 40px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 140px;
}
.footer button {
  width: 20%;
  height: 30px;
  margin: 0 auto;
  background-color: rgb(238, 238, 238);
  font-size: 20px;
  border-radius: 5px;
  display: block;
  border: 1px solid rgb(186, 185, 185);
}
.back {
  height: 1.5625rem;
  margin: 10px;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}
</style>
